import { View, Text } from '@tarojs/components'
import { useState } from 'react'
import Taro from '@tarojs/taro'
import { AtForm, AtInput, AtButton,AtList, AtListItem } from 'taro-ui'
import {Picker } from '@tarojs/components'
import request  from '../../utils/request'
import './index.scss'
export default function Index () {

  const [loginform,setloginform] = useState({
   "name": "",
    "loginName": "",
    "password": "",
    "mobile": "",
    "gender": "1",
    "cityCode": "",
    "birthday": "",
    "status": 1,
    "intro": "",
    "targetRole": "STUDENT"
  }) 
  const submit = ()=>{
    if(loginform.name==''){
      Taro.showToast({
        title: '姓名必填',
        icon:'none',
        duration: 2000
      })
      return;
    }
     if(loginform.loginName==''){
      Taro.showToast({
        title: '账号必填',
        icon:'none',
        duration: 2000
      })
      return;
    }
     if(loginform.password==''){
      Taro.showToast({
        title: '密码必填',
        icon:'none',
        duration: 2000
      })
      return;
    }
     if(loginform.mobile==''){
      Taro.showToast({
        title: '手机号必填',
        icon:'none',
        duration: 2000
      })
      return;
    }
    //admin/login
    request.post('app/register-simple',loginform).then((res)=>{
      Taro.showToast({
        title: '注册成功',
        duration: 2000
      })
      Taro.navigateTo({url:'/pages/login/index'})
    })
  }
  return (
    <div className='registerform'>
      <AtForm>
        <div className='selectorWrap'>
          <Picker mode='selector' rangeKey="label" range={[{label:'男',value:'STUDENT'},{label:'女',value:'TEACHER'}]} onChange={(v)=>{
          console.log(v);
            setloginform({
              ...loginform,
              ...{
                gender:v.detail.value
              }
            })
          }}
        >
          <AtList>
            <AtListItem
              title='类别'
              extraText={['STUDENT','TEACHER'][loginform.gender]}
            />
          </AtList>
        </Picker>
        </div>
        <AtInput 
          name='name' 
          title='姓名' 
          type='text' 
          placeholder='姓名' 
          required
          value={loginform.name} 
          onChange={(v)=>{setloginform({
            ...loginform,
            ...{
              name:v
            }
          })}}
        />
        <AtInput 
          name='loginName' 
          title='账号' 
          required
          type='text' 
          placeholder='账号' 
          value={loginform.loginName} 
          onChange={(v)=>{setloginform({
            ...loginform,
            ...{
              loginName:v
            }
          })}}
        />
        <AtInput 
          name='password' 
          title='密码' 
          required
          type='password' 
          placeholder='密码' 
          value={loginform.password} 
          onChange={(v)=>{setloginform({
            ...loginform,
            ...{
              password:v
            }
          })}}
        />  
        <AtInput 
          name='mobile' 
          title='手机号' 
          required
          type='text' 
          placeholder='手机号' 
          value={loginform.mobile} 
          onChange={(v)=>{setloginform({
            ...loginform,
            ...{
              mobile:v
            }
          })}}
        />
        <div className='selectorWrap'>
          <Picker mode='selector' rangeKey="label" range={[{label:'未知',value:''},{label:'男',value:'1'},{label:'女',value:'2'}]} onChange={(v)=>{
          console.log(v);
          setloginform({
            ...loginform,
            ...{
              gender:v.detail.value
            }
          })
        }}
        >
          <AtList>
            <AtListItem
              title='性别'
              extraText={['未知','男','女'][loginform.gender]}
            />
          </AtList>
        </Picker>
        </div>
        <div className='selectorWrap'>
          <Picker mode='date' onChange={(e)=>{
             setloginform({
            ...loginform,
            ...{
              birthday:e.detail.value
            }
            })
          }}
          >
            <AtList>
              <AtListItem title='生日' extraText={loginform.birthday} />
            </AtList>
          </Picker>
        </div>
        
        
        <AtButton formType='submit' className='loginbutton' onClick={submit}>注册</AtButton>
        
      </AtForm>
    </div>
    
  )
}
